<template>
  <div class="estate_detail">
    <!-- 搜索栏组件 -->
    <div class="search">
      <div class="w">
        <Search></Search>
      </div>
    </div>
    <!-- 小区详情 -->
    <div class="w">
      <div class="container clearfix">
        <div class="first" ref="nav0">
          <div class="title clearfix">
            <h5 class="name fl">{{initData.info.estateName}}</h5>
            <span class="address fl">({{initData.info.location}} {{initData.info.address}})</span>
          </div>
          <!-- 顶部导航栏 -->
          <div class="nav" ref="e_nav">
            <div class="e-topNav" :style="isFixed ? 'position: fixed;padding: 0 20px;left: 167px' : ''">
              <ul class="clearfix">
                <li v-for="(v, i) in navList" :key="i" :ref="v.ref" :class="activeNav == i ? 'active' : ''" @click="handleToggle(i, v.ref)">{{v.title}}</li>
              </ul>
            </div>
          </div>

          <div class="detail clearfix">
            <!-- 图片展示盒子 -->
            <div class="img-box fl">
              <el-image style="width: 780; height: 400px" :src="initData.imgList[initData.activeImg].src" :preview-src-list="initData.imgArr">
              </el-image>
              <div class="selection clearfix">
                <div class="el-icon-arrow-left fl" @click="moveLeft"></div>
                <!-- 图片盒子 -->
                <div class="swiper clearfix">
                  <ul class="clearfix" :style="`transform: translateX(${initData.tX}px)`">
                    <li :class="index == initData.activeImg ? 'active':''" v-for="(item, index) in initData.imgList" :key="index" @click="selectImg(index)"><img :src="item.src" alt=""></li>
                  </ul>
                </div>

                <div class="el-icon-arrow-right" @click="moveRight"></div>
              </div>
            </div>
            <!-- 详情 -->
            <div class="info fr">
              <div class="price">在售均价<span>{{initData.info.average}}</span>元/㎡</div>
              <div class="detail2">
                <p>
                  <span class="ms1">建筑年代</span>
                  <span class="ms2">{{initData.info.builtYear}}年建成</span>
                </p>
                <p>
                  <span class="ms1">物业用途</span>
                  <!-- <span class="ms2" v-for="(v,i) in initData.info.purpose" :key="i">{{v}}{{((key) =>{
                          switch (key) {
                          case initData.info.purpose.length-1: return ''; break;
                          default: return '|'; break;
                          }
                        })(i)}}</span> -->
                  <span class="ms2">{{initData.info.purpose}}</span>
                </p>
                <p>
                  <span class="ms1">产权性质</span>
                  <span class="ms2">{{initData.info.nature}}</span>
                </p>
                <p>
                  <span class="ms1">开发商名</span>
                  <span class="ms2">{{initData.info.property}}</span>
                </p>
                <p>
                  <span class="ms1">物业公司</span>
                  <span class="ms2">{{initData.info.property}}</span>
                </p>
                <p>
                  <span class="ms1">附近门店</span>
                  <span class="ms2">{{initData.info.branch}}</span>
                </p>
              </div>
              <div class="agent clearfix">
                <div class="a-avatar fl">
                  <img :src="agentList[0].avatar" alt="" width="57" height="76">
                </div>
                <div class="a-info fl">
                  <div class="a-name">{{agentList[0].name}}</div>
                  <div class="a-des">我很了解该小区</div>
                  <div class="a-phone"><i class="el-icon-phone"></i> {{agentList[0].phone}}</div>
                </div>
              </div>
              <div class="btn">
                <el-button type="primary"><i class="el-icon-chat-line-round"></i> 免费咨询</el-button>
              </div>
            </div>
          </div>

        </div>

        <div class="content fl">
          <!-- 小区介绍 -->
          <div class="second clearfix" ref="nav1">
            <div class="title">小区介绍</div>
            <div class="info clearfix">
              <div class="fl basics">基本属性</div>
              <div class="fl">
                <div class="detail1 clearfix">
                  <p>
                    <span class="ms1">建筑结构</span>
                    <span class="ms2 one-txt-cut" :title="initData.info.structure">{{initData.info.structure}}</span>
                  </p>
                  <p>
                    <span class="ms1">规划户数</span>
                    <span class="ms2">{{initData.info.plannednumber}}户</span>
                  </p>
                  <p>
                    <span class="ms1">车位个数</span>
                    <span class="ms2">{{initData.info.carplace}}个</span>
                  </p>
                  <p>
                    <span class="ms1">建筑面积</span>
                    <span class="ms2">{{initData.info.builtArea}}㎡</span>
                  </p>
                  <p>
                    <span class="ms1">容积比率</span>
                    <span class="ms2">{{initData.info.volume}}</span>
                  </p>
                  <p>
                    <span class="ms1">绿化情况</span>
                    <span class="ms2">{{initData.info.green}}%</span>
                  </p>
                  <p>
                    <span class="ms1">用水</span>
                    <span class="ms2">{{initData.info.water}}</span>
                  </p>
                  <p>
                    <span class="ms1">用电</span>
                    <span class="ms2">{{initData.info.power}}</span>
                  </p>
                  <p>
                    <span class="ms1">用气</span>
                    <span class="ms2">{{initData.info.gas}}</span>
                  </p>
                  <p>
                    <span class="ms1">物业费用</span>
                    <span class="ms2">{{initData.info.propertyFee}}元/㎡</span>
                  </p>
                </div>
                <div class="detail2">
                  <p>
                    <span class="ms1">小区配套</span>
                    <span class="ms2">{{initData.info.facilities}}</span>
                  </p>
                  <p>
                    <span class="ms1">体育设施</span>
                    <span class="ms2">{{initData.info.sport}}</span>
                  </p>
                </div>
              </div>
              <div class="tip">
                信息来源于实勘、政府官网等渠道，可能因政府规划、时间等而发生变化，仅供参考。
              </div>
            </div>
            <div class="desc clearfix">
              <div class="d-title fl">小区描述</div>
              <div class="box fl">
                <div class="box-text">
                  <p v-show="!text_show"><!-- 展开＞＞ -->
                    {{initData.info.desc}}<a href="javascript:;" @click="text_show = true"></a>
                  </p>
                  <!-- <p v-show="text_show">
                    {{initData.info.desc}}<a href="javascript:;" @click="text_show = false">＜＜收起</a>
                  </p> -->
                </div>
                <div class="box-jt">
                  <span><img src="@/assets/images/ditie.png" width="20" height="20" alt="">{{initData.info.traffic}}</span>
                  <!-- <span>{{initData.info.traffic}}</span> -->
                  <div class="tip">数据来源于百度地图，请以实际为准。</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 小区二手房 -->
          <div class="third" ref="nav2">
            <div class="title">小区二手房</div>
            <div class="list-box">
              <ul>
                <li class="clearfix" v-for="(item, index) in esfList" :key="index">
                  <div class="image fl" @click="goPage(index)">
                    <img :src="item.img" width="200" height="160" />
                  </div>
                  <div class="text fl">
                    <h2 class="tit" @click="goPage(item.id)">{{item.title}}</h2>
                    <p class="attr">
                      <span>{{item.kind}}</span>
                      <em class="line"></em>
                      <span>朝{{item.orientation}}</span>
                      <em class="line"></em>
                      <span>建筑面积{{item.buildArea}}㎡</span>
                      <em class="line"></em>
                      <span>套内面积{{item.insideArea}}㎡</span>
                    </p>
                    <p class="attr">
                      <span>{{item.decoration}}</span>
                      <em class="line"></em>
                      <span>{{item.floor}}</span>
                      <em class="line"></em>
                      <span>{{item.builtYear}}年建成</span>
                    </p>
                    <p class="attr">
                      <span>{{initData.info.estateName}}</span>
                      <em class="line"></em>
                      <span>{{initData.info.location}}</span>
                    </p>
                    <p class="labs">
                      <el-tag class="tag1" v-show="item.tag1">精选好房</el-tag>
                      <el-tag>{{item.tag2}}</el-tag>
                      <el-tag v-show="item.tag3" style="background-color: #ffeeee;">红本在手</el-tag>
                      <el-tag v-show="item.tag4" style="background-color: #f7f5c5;">有电梯</el-tag>
                      <el-tag v-show="item.tag5">随时可看</el-tag>
                    </p>
                  </div>
                  <div class="price fr">
                    <p><span><b>{{item.sup}}</b>万</span></p>
                    <p>单价{{item.sub}}元/㎡</p>
                    <!-- <p class="btn"><img src="@/assets/images/contact.png">在线咨询</p> -->
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 小区附近学校 -->
          <div class="fourth" ref="nav3">
            <div class="title">小区附近学校</div>
            <el-table :data="schoolList" style="width: 100%">
              <el-table-column prop="name" label="学校名称" width="180">
                <template slot-scope="scope">
                  <div class="name">
                    {{scope.row.name}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="类型" width="70"></el-table-column>
              <el-table-column prop="nature" label="办学性质" width="100"></el-table-column>
              <el-table-column prop="area" label="所在城区" width="100"></el-table-column>
              <el-table-column prop="address" label="学校地址"></el-table-column>
            </el-table>
          </div>
          <!-- 房价走势 -->
          <div class="fifth" ref="nav4">
            <div class="title">房价走势</div>
            <div class="echarts">
              <div class="growth">
                <div>本小区</div>
                <!--  -->
                <div class="a_price">
                  <b>{{initData.info.a_price}}</b><span>元/㎡</span><span class="rate" :style="initData.info.growth == 0 ? 'color:#2e9d00;':'color:#e03270;'">环比3月 {{((key) =>{
                          switch (key) {
                          case 0: return '↓'; break;
                          case 1: return '↑'; break;
                          default: return ''; break;
                          }
                        })(initData.info.growth)}}{{initData.info.rate}}</span>
                </div>
              </div>
              <div id="echart1" ref="chart"></div>
            </div>
          </div>
          <!-- 金牌经纪人 -->
          <div class="sixth" ref="nav5">
            <div class="title">金牌经纪人</div>
            <ul class="clearfix">
              <li v-for="(v, i) in agentList" :key="i">
                <div class="img fl">
                  <img :src="v.avatar" width="96" height="128">
                </div>
                <div class="sup-agent-cont">
                  <p class="name">{{v.name}}</p>
                  <p class="hp">好评率：{{v.hp}}</p>
                  <p class="cont">{{v.cont}}</p>
                  <p class="tel">{{v.phone}}</p>
                </div>
              </li>
            </ul>
          </div>

        </div>
        <!-- 广州房产资讯 -->
        <div class="info-box fr">
          <div class="hd clearfix">
            <h3 class="fl">广州房产资讯</h3>
            <a href="javascript:;" class="more fr">查看更多&gt;</a>
          </div>
          <ul class="bd">
            <li class="one-txt-cut" v-for="(v, i) in infobox" :key="i">{{v.title}}</li>
          </ul>
        </div>
        <!-- 选房小技巧 -->
        <div class="info-box fr">
          <div class="hd clearfix">
            <h4 class="fl">选房小技巧</h4>
            <a href="javascript:;" class="more fr" target="_blank">查看更多&gt;</a>
          </div>
          <ul class="bd">
            <li class="one-txt-cut" v-for="(v, i) in infobox2" :key="i">{{v.title}}</li>
          </ul>
        </div>
        <!-- 热门小区 -->
        <div class="info-box fr">
          <div class="hd clearfix">
            <h4 class="fl">热门小区</h4>
          </div>
          <el-table :data="estateList" style="width: 100%">
            <el-table-column prop="name" label="小区名称">
              <template slot-scope="scope">
                <div class="name">
                  {{scope.row.name}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="area" label="所在城区" width="80" align="center" header-align='center'></el-table-column>
            <el-table-column prop="price" width="100" label="均价/㎡" align="right" header-align='right'></el-table-column>
          </el-table>
        </div>

        <div class="fr" style="width: 340px" ref="agent">
          <div :class="['info-box', 'fr', a_fixed ? 'fixedTop':'']">
            <div class="intro-box3">
              <a class="img fl">
                <img :src="initData.agent.avatar" width="57" height="76">
              </a>
              <div class="intro-box fl" style="max-width:200px;">
                <p class="name">
                  {{initData.agent.name}}
                </p>
                <p class="cont one-txt-cut" :title="initData.agent.cont">
                  {{initData.agent.cont}}
                </p>
                <p class="tel">
                  {{initData.agent.phone}}
                </p>
              </div>
            </div>
            <div class="btn">
              <el-button type="primary"><i class="el-icon-chat-line-round"></i> 免费咨询</el-button>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import Search from "@/components/Search";
import "@/assets/less/estate_detail.less";
export default {
  name: 'estate_detail',
  components: {
    Search
  },
  data() {
    return {
      initData: {
        info: {},
        activeImg: 0,
        tX: 0,
        imgArr: [],
        imgList: [
            { src: require("@/assets/images/ed00-01.jpg") },
            { src: require("@/assets/images/ed00-02.jpg") },
            { src: require("@/assets/images/ed00-03.jpg") },
            { src: require("@/assets/images/ed00-04.jpg") },
            { src: require("@/assets/images/ed00-05.jpg") },
            { src: require("@/assets/images/ed00-06.jpg") },
            { src: require("@/assets/images/ed00-07.jpg") },
            { src: require("@/assets/images/ed00-08.jpg") },
          ],
          agent: {
            name: '林文丹',
            phone: '13655556666',
            avatar: require("@/assets/images/personal.jpg"),
            cont: '最近带看本小区房源0次，熟悉小区特色',
            hp: '100%'
          },
      },
      navList: [
        { title: "小区首页", ref: "nav0" },
        { title: "小区介绍", ref: "nav1" },
        { title: "小区二手房", ref: "nav2" },
        { title: "小区学校", ref: "nav3" },
        { title: "房价走势", ref: "nav4" },
        { title: "金牌经纪人", ref: "nav5" }
      ],
      agentList: [
        {
          id: "001",
          name: "陈铠泓",
          phone: "13655556666",
          avatar: require("@/assets/images/personal.jpg"),
          cont: '最近带看本小区房源190次，熟悉小区特色',
          hp: '100%'
        },
        {
          id: "002",
          name: "陈铠泓",
          phone: "13655556666",
          avatar: require("@/assets/images/personal.jpg"),
          cont: '最近带看本小区房源190次，熟悉小区特色',
          hp: '100%'
        },
        {
          id: "003",
          name: "陈铠泓",
          phone: "13655556666",
          avatar: require("@/assets/images/personal.jpg"),
          cont: '最近带看本小区房源190次，熟悉小区特色',
          hp: '100%'
        },
      ],
      esfList: [
        {
          id: 1,
          title: "金碧花园有房出售",
          cover: require('@/assets/images/images_default.png'),
          kind: "6室3厅3卫",
          orientation: "南",
          buildArea: 278.94,
          insideArea: 270,
          decoration: "豪装",
          estate: "金碧花园第三金碧",
          location: "海珠-工业大道南",
          tag1: "精选好房",
          tag2: "红本在手",
          tag3: "满五年",
          tag4: "有电梯",
          price: 2000,
          unit_price: 71700,
          floor1: "低楼层",
          floors: 3,
          buildYear: "2007-02-02",
        },
        {
          id: 1,
          title: "金碧花园有房出售",
          cover: require('@/assets/images/images_default.png'),
          kind: "6室3厅3卫",
          orientation: "南",
          buildArea: 278.94,
          insideArea: 270,
          decoration: "豪装",
          estate: "金碧花园第三金碧",
          location: "海珠-工业大道南",
          tag1: "精选好房",
          tag2: "红本在手",
          tag3: "满五年",
          tag4: "有电梯",
          price: 2000,
          unit_price: 71700,
          floor1: "低楼层",
          floors: 3,
          buildYear: "2007-02-02",
        },
        {
          id: 1,
          title: "金碧花园有房出售",
          cover: require('@/assets/images/images_default.png'),
          kind: "6室3厅3卫",
          orientation: "南",
          buildArea: 278.94,
          insideArea: 270,
          decoration: "豪装",
          estate: "金碧花园第三金碧",
          location: "海珠-工业大道南",
          tag1: "精选好房",
          tag2: "红本在手",
          tag3: "满五年",
          tag4: "有电梯",
          price: 2000,
          unit_price: 71700,
          floor1: "低楼层",
          floors: 3,
          buildYear: "2007-02-02",
        },
        {
          id: 1,
          title: "金碧花园有房出售",
          cover: require('@/assets/images/images_default.png'),
          kind: "6室3厅3卫",
          orientation: "南",
          buildArea: 278.94,
          insideArea: 270,
          decoration: "豪装",
          estate: "金碧花园第三金碧",
          location: "海珠-工业大道南",
          tag1: "精选好房",
          tag2: "红本在手",
          tag3: "满五年",
          tag4: "有电梯",
          price: 2000,
          unit_price: 71700,
          floor1: "低楼层",
          floors: 3,
          buildYear: "2007-02-02",
        },
        {
          id: 1,
          title: "金碧花园有房出售",
          cover: require('@/assets/images/images_default.png'),
          kind: "6室3厅3卫",
          orientation: "南",
          buildArea: 278.94,
          insideArea: 270,
          decoration: "豪装",
          estate: "金碧花园第三金碧",
          location: "海珠-工业大道南",
          tag1: "精选好房",
          tag2: "红本在手",
          tag3: "满五年",
          tag4: "有电梯",
          price: 2000,
          unit_price: 71700,
          floor1: "低楼层",
          floors: 3,
          buildYear: "2007-02-02",
        },
      ],
      activeNav: 0,
      isFixed: false,
      text_show: false,
      schoolList: [
        {
          name: '广州市海珠区金碧第一小学',
          type: '小学',
          nature: '市级公办',
          area: '海珠',
          address: '广州市海珠区工业大道南第二金碧花园金诚三街3号'
        }, {
          name: '广州市第九十七中学(江南新苑校区)',
          type: '小学',
          nature: '省级公办',
          area: '海珠',
          address: '晓港东横街12号(新港西路百佳超市旁)'
        },
      ],
      infobox: [
        {
          title: '3号线东延坪西站交通疏解顺利完成，预计2025年通车',
        },
        {
          title: '定了!6条城际铁路途经东莞!深圳都市圈真的要来了!',
        },
        {
          title: '未来5年深圳每年新增幼儿园学生位2万多个',
        },
        {
          title: '请注意！ 4月10日起广深城际开一站直达快车',
        },
        {
          title: '@深圳家长，教育部发布重磅文件！信息量很大…',
        },
        {
          title: '广州今年至少新开18所中小学,一贯制学校占72%',
        },
        {
          title: '惠州多所中学发布招生信息',
        },
        {
          title: '广汕铁路尖山髻隧道出口方向贯通 全线计划2023年建成通车',
        },
        {
          title: '光明5个重大项目用地实施方案获批！涉及大学、医院、文体中心…',
        },
        {
          title: '好期待!深圳首条无人驾驶地铁年底通车,未来可直达滨海湾!',
        },
      ],
      infobox2: [
        {
          title: '选二手房怎样升值快？',
        },
        {
          title: '怎么选二手房？',
        },
        {
          title: '二手房怎么选？',
        },
        {
          title: '选房知识|购买二手房如何选房',
        },
        {
          title: '怎样选二手房才合适',
        },
        {
          title: '买小户型的二手房怎样选？',
        },
        {
          title: '买二手房选什么地段好',
        },
        {
          title: '买毛坯二手房屋注意事项',
        },
        {
          title: '如何选择二手房？',
        },
        {
          title: '买二手房买选什么地段好？',
        },

      ],
      estateList: [
        {
          name: '锦绣新天地',
          area: '增城',
          price: '18032元',
        },
        {
          name: '雅居乐城南源著',
          area: '番禺',
          price: '37591元',
        },
        {
          name: '越秀·可逸江畔',
          area: '番禺',
          price: '29232元',
        },
        {
          name: '金沙湾花园',
          area: '番禺',
          price: '24270元',
        },
        {
          name: '尚东尚筑',
          area: '番禺',
          price: '40892元',
        },
        {
          name: '番禺华景新城',
          area: '番禺',
          price: '25551元',
        },
        {
          name: '东华花园',
          area: '番禺',
          price: '25678元',
        },
        {
          name: '雅怡花园',
          area: '花都',
          price: '15855元',
        },
        {
          name: '万科城市花园',
          area: '黄埔',
          price: '43829元',
        },
        {
          name: '富丽家园富泽居',
          area: '番禺',
          price: '26970元',
        },
      ],
      a_fixed: false,
    }
  },
  created() {
    this.init();
  },
  mounted() {
    this.initEcharts();
    document.getElementById('index').addEventListener("scroll", this.showNav);
  },
  beforeDestroy() {
    document.getElementById('index').removeEventListener("scroll", this.showNav)
  },
  methods: {
    init() {
      this.initData.imgList.forEach(v => {
        this.initData.imgArr.push(v.src);
      });
      this.axios({
        method: 'get',
        url: this.baseUrl + '/getEatesdetail',
        params: {id: this.$route.params.id}
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.initData.info = res.data.data[0]
          // this.initData.estate = res.data.data[0].estate
          this.sameEstate();
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    // 同小区房源
    sameEstate() {
      this.axios({
        method: 'get',
        url: this.baseUrl + '/getSameEstate',
        params: {estateId: this.initData.info.estateId}
      }).then(res => {
        console.log('same res==>', res)
        if (res.data.code == 200) {
          this.esfList = res.data.data
          if(this.esfList.length > 4){
            this.esfList.splice(0, 4)
          }
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    // 跳转新标签
    goPage(i) {
      let routeUrl = this.$router.resolve(`/agent_detail?id=${i}`);
      document.getElementById('index').open(routeUrl.href, "_blank");
    },
    // 顶部导航栏
    showNav() {
      let c = document.getElementById('index').scrollTop;
      // console.log(c)
      if (this.$refs.e_nav.offsetTop < c) {
        this.activeNav = 0;
        this.isFixed = true;
        if (this.$refs.nav1.offsetTop - 73 < c) {
          this.activeNav = 1;
        }
        if (this.$refs.nav2.offsetTop - 73 < c) {
          this.activeNav = 2;
        }
        if (this.$refs.nav3.offsetTop - 73 < c) {
          this.activeNav = 3;
        }
        if (this.$refs.nav4.offsetTop - 73 < c) {
          this.activeNav = 4;
        }
      } else {
        this.isFixed = false;
      }
      // 
      if (this.$refs.agent.offsetTop - 53 < c) {
        this.a_fixed = true;
      } else {
        this.a_fixed = false;
      }
    },
    // 点击导航栏，滚动条移动到内容所对应的位置
    handleToggle(index, nav) {
      this.activeNav = index;
      //   网页被卷去的高   offsetTop
      // console.log(this.$refs[nav]);
      document.getElementById('index').scrollTo(0, this.$refs[nav].offsetTop - 72);
    },
    // 上一张图片
    moveLeft() {
      this.initData.activeImg--;
      if (this.initData.imgList.length > 6 && this.initData.activeImg > 0) {
        if (this.initData.activeImg < this.initData.imgList.length - 5) {
          if (this.initData.tX == 0) {
            return;
          }
          this.initData.tX += 124;
          // console.log(this.initData.tX);
        }
      }
      if (this.initData.activeImg < 0) {
        this.initData.activeImg = this.initData.imgList.length - 1;
        this.initData.tX = -124 * (this.initData.imgList.length - 6);
      }
    },
    // 下一张图片
    moveRight() {
      this.initData.activeImg++;
      if (this.initData.imgList.length > 6 && this.initData.activeImg < this.initData.imgList.length - 1) {
        if (4 < this.initData.activeImg) {
          if (this.initData.tX == -124 * (this.initData.imgList.length - 6)) {
            return;
          }
          this.initData.tX -= 124;
          // console.log(this.initData.tX);
        }
      }
      if (this.initData.activeImg > this.initData.imgList.length - 1) {
        this.initData.activeImg = 0;
        this.initData.tX = 0;
      }
    },
    // 点击图片
    selectImg(i) {
      this.initData.activeImg = i;
      let n = Math.abs(this.initData.tX / 124);
      if (this.initData.imgList.length - 6 > n && i > 4 + n) {
        this.initData.tX -= 124;
      } else if (0 < i && i < 1 + n) {
        this.initData.tX += 124;
      }
    },
    // 初始化eChart
    initEcharts() {
      let myChart = this.$echarts.init(this.$refs.chart);
      let option = this.getOption();
      myChart.setOption(option);
    },
    // eChart数据
    getOption() {
      return {
        legend: {
          // legendUnSelect,
          data: ["该小区均价变化"]
        },
        tooltip: {
          trigger: "axis",
          // formatter: "{b} : <br/>{a} : {c}万/㎡",
          formatter: function (params) {
            // let data = params || 0;
            // console.log('params==>', params)
            let str = `${params[0].name}<br>
                      ${params[0].seriesName}: ${params[0].value}万元`;
            return str;
          }
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ]
        },
        yAxis: {
          type: "value",
          // data: ['']
          axisLabel: {
            formatter: "{value} 万元/㎡"
          }
        },
        series: [
          {
            name: "该小区均价变化",
            data: [6.0, 6.1, 6.1, 6.0, 6.0, 5.9, 6.3, 6.1, 6.0, 6.1, 6.1, 6.2],
            type: "line"
          }
        ]
      };
    },
  },
}
</script>

<style lang="less" scoped>
</style>